<!-- Dom模板 -->
<template>
  <div class="foot">
    <!-- Dom内容 -->
    <ul class="footer">
      <li
        v-for="(item, index) in footerList"
        @click="liClick(item, index)"
        :key="index"
        class="dao"
      >
        <!-- <p :class="item.meta.icon"></p> -->
        <img
          :src="
            $route.meta.nowIndex === item.meta.nowIndex
              ? item.meta.icon[0]
              : item.meta.icon[1]
          "
          alt=""
        />
        <div
          :class="$route.meta.nowIndex === item.meta.nowIndex ? 'active' : ''"
        >
          {{ item.meta.name }}
        </div>
      </li>
    </ul>
    {{ changeImg }}
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      footerList: [],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.fiflerRou();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    document.querySelector(
      ".footer"
    ).children[2].style.backgroundImage = `url('${this.$store.state.bags.bookItem.book_img_url}')`;
  },
  // Vue方法定义
  methods: {
    fiflerRou() {
      this.footerList = this.$router.options.routes.filter((item) => {
        return item.hidden !== true;
      });
    },
    liClick(item, i) {
      if (i === 2) {
        this.$store.commit("bags/getMusicItem", {
          item: this.$store.state.bags.bookItem,
          index: 1,
        });
        if (
          this.$store.state.bags.bookCatalog.length !== 0 &&
          this.$store.state.bags.bookItem
        ) {
          this.$router.history.push({
            path: item.path,
            query: {
              path: this.$route.path,
            },
          });
        } else {
          Toast("请先收听");
        }
      } else {
        this.$router.history.push({
          path: item.path,
          query: {
            path: this.$route.path,
          },
        });
      }
      console.log(item.path);
    },
  },
  computed: {
    changeImg() {
      this.$store.state.bags.bookItem.book_img_url;
      this.$nextTick(() => {
        document.querySelector(
          ".footer"
        ).children[2].style.backgroundImage = `url('${this.$store.state.bags.bookItem.book_img_url}')`;
      });
      return "";
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.foot {
  width: 100vw;
  height: 1.493333rem;
}
.footer {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding: 0.2rem 0;
  background: white;
  text-align: center;
  box-shadow: 0 -0.026667rem 0 rgb(219, 219, 219);
  /* position: relative; */
  /* z-index: 88; */
}

.footer li {
  color: rgb(132 131 131);
  transform: scale(0.9);
}
.active {
  color: black;
}
.footer li:nth-child(3) img {
  width: 0.4rem;
  height: 0.453333rem;
  position: absolute;
  top: 33%;
  left: 44%;
}
.footer li:nth-child(3) {
  width: 1.333333rem;
  height: 1.333333rem;
  border-radius: 50%;
  margin-top: -5px;
  position: relative;
  /* background-size: contain; */
  background-repeat: no-repeat;
  /* background-position: center center; */
}
</style>